{extend name="index/index" / }
{block name="main"}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    {css href="/static/css/bootstrap.min.css" }

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    {js href="./public/html5shiv/3.7.2/html5shiv.min.js"}
    {js href="./public/respond.js/1.4.2/respond.min.js"}
    <![endif]-->
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="container">
    <div class="row">
        <div class="col-md-5 col-md-offset-3">
            <form class="form-horizontal" name="register" method="post" action="{:url('index/Register/save')}">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputEmail3" name="user" placeholder=""
                               onblur="checkuser()">
                        <div id="utab"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label ">手机号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="verify" name="tel" placeholder=""
                               onblur="checktel()">
                        <div id="ttab"></div>
                    </div>

                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="pass" id="inputPassword3" placeholder=""
                               onblur="checkpass()">
                        <div id="ptab"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" name="verify" id="inputPassword4" placeholder=""
                              >
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-default  yzm"  disabled id="yzm" style="margin-left: -16px" >
                            验证码
                        </button>

                    </div>
                    <div class="col-sm-10">
                        <div style="margin-left: -16px " id="vtab">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </div>

                    </div>

                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">

                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <!-- <button type="button" class="btn btn-primary btn-lg btn-block col-md-3" >注册</button> -->
                    <button type="submmit" class="btn btn-primary btn-lg col-md-10 col-md-offset-2">注册</button>
                </div>


            </form>


        </div>
    </div>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->

{js href="/static/layout/js/jquery-1.10.2.min.js" }
{js href="/static/layout/js/bootstrap.min.js" }
</body>
</html>

<script >



    function checkuser() {
        var user = document.register.user.value;
        var utab = document.getElementById('utab');
        if (user.match(/^[a-zA-Z0-9_-]{4,16}$/) == null) {

            utab.innerHTML = '4到16位（字母，数字，下划线，减号）!';
            utab.style.color = '#f00';
            return false;
        } else {
            utab.innerHTML = '通过验证';
            utab.style.color = '#0a0';
            return true;
        }
    }

    function checktel() {
        var tel = document.register.tel.value;
        var ttab = document.getElementById('ttab');

        if (tel.match(/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/) == null) {

            ttab.innerHTML = '请输入正确的手机号码';
            ttab.style.color = '#f00';
            return false;
        } else {
            var btn = document.getElementById('yzm');
            // console.log(num);
            btn.disabled = false;
            ttab.innerHTML = '通过验证';
            ttab.style.color = '#0a0';

            return true;
        }
    }

    function checkpass() {
        var pass = document.register.pass.value;
        var ptab = document.getElementById('ptab');

        if (pass.match(/^[a-zA-Z]\w{5,17}$/) == null) {

            ptab.innerHTML = '字母开头，6~18位，只能包含字母、数字和下划线';
            ptab.style.color = '#f00';
            return false;
        } else {

            ptab.innerHTML = '通过验证';
            ptab.style.color = '#0a0';
            return true;
        }
    }

    $('.yzm').click(function () {
            var num = document.getElementById('verify').value;
            console.log(num);
            yzm(num);
            return false;
        }
    );




    function yzm(num) {

        $.ajax({
            type: 'get',
            url: '/yzm/'+num+'.html',
            dataType: 'json',
            success: function (data) {
                alert('1111');
                console.log(data);

                },


            
        });
    }


</script>
{/block}

{js href="/static/admin/js/jquery.min.js"}
{js href="/static/admin/js/bootstrap.min.js"}
{js href="/static/admin/js/toastr.min.js"}
<!--{block name="myjs"}-->
<!--<script>-->
<!--$(function () {-->
<!--// 设置弹框参数-->
<!--toastr.options = {-->
<!--closeButton: true,// 是否显示关闭按钮-->
<!--progressBar: true,// 实现显示计时条-->
<!--timeOut: "3000",  // 自动关闭时间-->
<!--positionClass: "toast-bottom-left" // 提示位置-->
<!--// toast-top-full-width 顶端，宽度铺满整个屏幕-->
<!--// toast-top-right  顶端右边-->
<!--};-->

<!--触发删除用户-->
<!--$('.del-btn').click(function () {-->
<!--var ac_id = $(this).attr('data-id');-->
<!--console.log('删除操作,ID:', ac_id);-->
<!--if (confirm('你确定要[删除]吗?!')) {-->
<!--var obj = $(this).parents('tr');-->
<!--delAjax(ac_id, obj); // 执行AJAX删除-->
<!--}-->
<!--});-->

<!--});-->
<!--触发查询单个用户信息-->


<!--$('.verify').click(function () {-->
<!--console.log('1111');die;-->
<!--var ac_id = $(this).parentNode();-->
<!--console.log('查询操作,ID:', ac_id);-->
<!--showAjax(ac_id); // 指定查看信息操作-->
<!--});-->
<!---->


<!--执行AJAX查询-->
<!--function showAjax(id) {-->
<!--// console.log(obj);-->
<!--$.ajax({-->
<!--type: 'get',-->
<!--url: '/users/' + id,-->
<!--dataType: 'json',-->
<!--success: function (data) {-->
<!--console.log(data);-->
<!--if (data.status) {-->
<!--$('.modal-title u').html(data.title);-->
<!--var msg = data.datas.name + '/'+data.datas.tel;-->
<!--$('.modal-body h3').html(msg);-->
<!--} else {-->
<!--$('.modal-title u').html(data.title);-->
<!--$('.modal-body h3').html(data.datas);-->
<!--}-->
<!--},-->
<!--error: function () {-->
<!--alert('AJAX操作失败');-->
<!--}-->
<!--});-->
<!--}-->


<!--// 执行AJAX删除-->
<!--function delAjax(id, obj) {-->
<!--// console.log(obj);-->
<!--$.ajax({-->
<!--type: 'delete',-->
<!--url: '/users/' + id,-->
<!--dataType: 'json',-->
<!--success: function (data) {-->
<!--console.log(data);-->
<!--if (data.status) {-->
<!--toastr.success(data.info);-->
<!--// 将该条目删除掉-->
<!--obj.remove();-->
<!--} else {-->
<!--toastr.error(data.info, 'FBI WARING:');-->
<!--}-->
<!--},-->
<!--error: function () {-->
<!--alert('AJAX操作失败');-->
<!--}-->
<!--});-->
<!--}-->


<!--</script>-->
<!--{/block}-->



